<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<head>
</head>
<body>
	<div class="x-body">
		<form:form id="saveForm" modelAttribute="entity" cssStyle="margin-left: 20px;" cssClass="layui-form layui-form-pane">
			<div style="width:100%;height:400px;overflow: auto;">
				<div class="layui-form-item">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;"><legend style="font-size:16px;">头像上传</legend></fieldset>
					<div class="layui-input-inline">
						<div class="layui-upload-drag" style="margin-left:10%;" id="test10">
							<i style="font-size:30px;" class="layui-icon"></i>
							<p style="font-size: 10px">点击上传，或将文件拖拽到此处</p>
						</div>
					</div>
					<div class="layui-input-inline">
						<div  id="demo2" style="margin-top: 20px;margin-left: 50px">
							<img src="${res}/${entity.photo==null?'static/kitadmin/images/0.jpg':entity.photo}" width="100px" height="100px" class="layui-upload-img layui-circle">
						</div>
						<input value="${entity.photo}" type="hidden" name="photo" id="photo">
					</div>
				</div>
				<div class="layui-form-item">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;"><legend style="font-size:16px;">基础信息</legend></fieldset>
				</div>
				<div class="layui-form-item">
					<label for="account" class="layui-form-label"><span class="x-red">*</span>用户名</label>
					<div class="layui-input-inline">
						<input value="${entity.id}" type="hidden" name="id">
						<form:input path="account" cssClass="required layui-input" maxlength="50"></form:input>
					</div>
					<div class="layui-form-mid layui-word-aux"><span id="ums">将会成为您唯一的登入名</span></div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label for="nickName" class="layui-form-label"><span class="x-red">*</span>昵称</label>
						<div class="layui-input-inline">
							<form:input path="nickName" cssClass="required layui-input" maxlength="50"></form:input>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-block">
							<input type="radio" name="sex" value="1" title="男" <c:if test="${entity.sex == '1' || entity.sex==null}">checked="checked"</c:if> >
							<input type="radio" name="sex" value="0" title="女" <c:if test="${entity.sex == '0'}">checked="checked"</c:if>>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">锁定登录</label>
						<div class="layui-input-block">
							<input type="checkbox" name="available" id ="available" lay-skin="switch" lay-filter="available" title="开关"
								   value="${entity.available}" <c:if test="${entity.available == 'true'}">checked</c:if>>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label for="nickName" class="layui-form-label"><span class="x-red">*</span>用户类型</label>
						<div class="layui-input-inline">
							<form:select path="userType" items="${fns:beanKeyValList('userTypeEnumPath')}" itemLabel="label" itemValue="value"></form:select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">生日</label>
						<div class="layui-input-block">
							<input id="birthday" name="birthday" class="required layui-input" value="<fmt:formatDate value="${entity.birthday}"  pattern="yyyy-MM-dd"/>"/>
						</div>
					</div>

				</div>
				<div class="layui-form-item">
					<input type="text" class="input-text" style="display:none;" value="${entity.address }" id="address" name="address"/>
					<label class="layui-form-label">地址</label>
					<div class="layui-input-inline">
						<select name="s_province" id="s_province" lay-filter="s_province"></select>
					</div>
					<div class="layui-input-inline">
						<select name="s_city" id="s_city" lay-filter="s_city"></select>
					</div>
					<div class="layui-input-inline">
						<select name="s_county" id="s_county"></select>
					</div>
				</div>
				<script type="text/javascript" src="${ctxStatic}/thirdparty/area/area.js"></script>
				<script> /*只能在代码内处理*/_init_area();</script>
				<div style="height: 60px"></div>
			</div>
			<c:if test="${!detail}">
				<div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;
		  position: fixed;bottom: 1px;margin-left:-20px;">
					<div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
						<a  class="layui-btn layui-btn-normal" lay-filter="add" lay-submit>确定</a>
						<a  class="layui-btn layui-btn-primary" id="close">取消</a>
					</div>
				</div>
			</c:if>
		</form:form>
	</div>
</body>
<myfooter>
	<script type="text/javascript">
        $(document).ready(function() {
            var detail='${detail}';
            if(detail=="true"){
                $("form").disable();
            }
        });
        $('#close').click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });

        var validate = $("#saveForm").validate({
            rules: {
                account: {remote: "${ctx}/user/checkUserName?id=${entity.id}"}
            },
            messages: {
                account: {remote: "用户名已存在.", required: "请填写用户名."}
            }
        });

        layui.use(['form','layer','upload'], function(){
            $ = layui.jquery;
            var form = layui.form,
				layer = layui.layer,
                laydate = layui.laydate,
                upload = layui.upload;

            form.on('switch(available)', function(data){
//                console.log(data.elem); //得到checkbox原始DOM对象
//                console.log(data.elem.checked); //开关是否开启，true或者false
                $("#available").val(data.elem.checked)
//                console.log(data.value); //开关value值，也可以通过data.elem.value得到
//                console.log(data.othis); //得到美化后的DOM/对象
            });


            var address = "${entity.address}";
            if(address!=""){
                address=address.split("-");
                $("#s_province").val(address[0]);
                $("#s_province").trigger("change");
                if(address.length>1){
                    $("#s_city").val(address[1]);
                    $("#s_city").trigger("change");
                }
                if(address.length>2){
                    $("#s_county").val(address[2]);
                }
            }
            form.on('select(s_province)', function(data){
                change(1);
				form.render('select');
            });
            form.on('select(s_city)', function(data){
                change(2);
                form.render('select');
            });


            laydate.render({
                elem: '#birthday'
            });

            upload.render({
                elem: '#test10',
				url: '${res}/fileTmp/simpleUploadFile',
				before: function(obj){
                    //预读，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo2').find('img').remove();
                        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" width="100px" height="100px" class="layui-upload-img layui-circle">');
                    });
                },done: function(res){
                    if(res.flag!=200){
                        layer.msg(res.msg,{icon: 5,anim: 6});
                    }else{
                        $("#photo").val(res.data);
                    }
                }
            });

            //监听提交
            form.on('submit(add)', function(data){
//                data.field.role=role;
				if(validate.form()){
                    var indexFormSubmit = layer.load(2, {shade: [0.3, '#333']});
                    if($("#s_county").val()!="市、县级市"){
                        $("#address").val($("#s_province").val()+"-"+$("#s_city").val()+"-"+$("#s_county").val());
                        data.field.address=$("#address").val();
                    }
                    $.ajax({
                        url:'${ctx}/user/saveEntity',
                        type:'post',
                        data:data.field,
                        async:false,
                        traditional: true,
                        success:function(d){
                            layer.close(indexFormSubmit);
                            if(d.flag=="200"){
                                parent.$("#refresh").trigger("click");
                                window.parent.layui.table.reload('pageList');
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                window.top.layer.msg(d.msg,{icon:6,offset: 'rb',area:['120px','80px'],anim:2});
                            }else{
                                window.top.layer.msg(d.msg,{icon:5,offset: 'rb',area:['120px','80px'],anim:2});
                            }
                        },error:function(){
                            layer.close(indexFormSubmit);
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            window.top.layer.msg('请求失败',{icon:5,offset: 'rb',area:['120px','80px'],anim:2});
                        }
                    })
				}
                return false;
            });
            form.render();
        });
	</script>
</myfooter>